$(function () {
    /* 
    1. 全选思路：里面3个小的复选框按钮选中状态跟着全选按钮走。
    2. 因为checked是复选框的固有属性，此时我们需要利用prop()方法获取和设置该属性。
    3. 把全选按钮状态赋值给3个小复选框就可以了
    4. 当我们每次点击小的复选框按钮，就来判断：
    5. 如果小复选框选中的个数等于3就应该把全选按钮选上，否则全选按钮不选
    6. :checked 选择器 :checked 查找被选中的表单元素
    */




    // 1. 全选 全不选功能
    // 就是把全选按钮（checkall)的状态赋值给 三个小的按钮（j-checkbox)就可以了
    // 事件可以使用change
    $(".checkall").change(function () {
        // console.log($(this).prop("checked"));
        $(".j-checkall, .checkall, .j-checkbox").prop("checked", $(this).prop("checked"));
        if($(this).prop("checked")) {
            $(".item-form").addClass("item-current");
        } else {
            $(".item-form").removeClass("item-current");
        }
        getSum();
        
    });
    $(".j-checkall").change(function () {
        $(this).parents(".store").find(".j-checkbox").prop("checked", $(this).prop("checked"));
        if($(this).prop("checked")) {
            $(this).parents(".store").find(".item-form").addClass("item-current");
        } else {
            $(this).parents(".store").find(".item-form").removeClass("item-current");
        }
        getSum();
    });
    // 2. 如果小复选框被选中的个数等于3 就应该吧全选按钮选上，否则全选按钮不选。
    $(".j-checkbox").change(function () {
        /*  if(被选中的小的复选框的个数 === 3) {
             就要选中全选按钮
         } else {
             取消全选按钮
         } */
        // console.log($(".j-checkbox:checked"));
        getSum();
        if($(this).prop("checked")) {
            $(this).parents(".item-full").find(".item-form").addClass("item-current");
        } else {
            $(this).parents(".item-full").find(".item-form").removeClass("item-current");
        }
       
        if ($(this).parents(".store").find(".j-checkbox:checked").length === $(this).parents(".store").find(".j-checkbox").length) {
            $(this).parents(".store").find(".j-checkall").prop("checked", true);
        } else {
            $(this).parents(".store").find(".j-checkall").prop("checked", false);
        }
        if($(".j-checkall:checked").length == $(".j-checkall").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false)
        }
    });
    


    /* 
    案例：购物车案例模块-增减商品数量分析
    - 核心思路：首先声明一个变量，当我们点击+号（increment),就让这个值++，然后赋值给文本框。
    - 注意1：只能增加本商品的数量，就是当前+号的兄弟文本框（text）的值。
    - 修改表单的值是val()方法
    - 注意2：这个变量初始值应该是这个文本框的值，在这个值的基础上++。要获取表单的值。
     */
    
    $(".quantity-form .add").click(function () {
        var increment = $(this).siblings("input").val();
        increment++;
        $(this).siblings("input").val(increment);
        var sum = $(this).parent().siblings(".p-price").find("strong").text();
        sum = sum.substr(1);
        sum = sum * increment;
        $(this).parent().siblings(".p-sum").html(" <strong>￥" + sum.toFixed(2) + "</strong>");
        getSum();
    });
    $(".quantity-form .reduce").click(function () {
        var increment = $(this).siblings("input").val();
        if (increment <= 1) {

        } else {

            increment--;
            $(this).siblings("input").val(increment);

            $(this).siblings("input").val(increment);
            var sum = $(this).parent().siblings(".p-price").find("strong").text();
            sum = sum.substr(1);
            sum = sum * increment;
            $(this).parent().siblings(".p-sum").html(" <strong>￥" + sum.toFixed(2) + "</strong>");
            getSum();
        }
    });

    // 4. 用户修改文本框的值 计算 小计模块
    $(".itxt").change(function () {
        var increment = $(this).val();
        var sum = $(this).parent().siblings(".p-price").find("strong").text();
        sum = sum.substr(1);
        sum = sum * increment;
        $(this).parent().siblings(".p-sum").html(" <strong>￥" + sum.toFixed(2) + "</strong>");
        getSum();
    });
    /* 
    1. 核心思路：把所有文本框里面的值相加就是总计数量。总额同理
    2. 文本框里面的值不相同，如果想要相加需要用到each遍历。声明一个变量，相加即可
    3. 点击+号-号，会改变总计和总额，如果用户修改了文本框里面的值同样会改变总计和总额
    4. 因此可以封装一个函数求总计和总额的，以上2个操作调用这个函数即可。
    5. 注意1：总计是文本框里面的值相加用val() 总额是普通元素的内容用text()
    6. 要注意普通元素里面的内容要去掉￥并且转换为数字型才能相加
    */
   

    /* 
    - 删除商品模块
    1. 核心思路：把商品remove()删除元素即可
    2. 有三个地方需要删除：1. 商品后面的删除按钮 2. 删除选中的商品 3. 清理购物车
    3. 商品后面的删除按钮：一定是删除当前的商品，所以从$(this)出发
    */
    $(".ops-del").click(function() {
        $(this).parents(".item-full").remove();
        delStore();
    });
    $(".del-choose").click(function() {
        $(".j-checkbox:checked").parents(".item-full").remove();
        delStore();   
    });

    $(".del-all").click(function() {
        $(".store").remove();
        delStore();
    });

    function delStore() {
        $.each($(".store"), function(i, ele) {
            if($(ele).find(".item-full").length === 0) {
                $(ele).remove();
            }
        });
        getSum();

    };    


    getSum();
    // 5. 计算总计和总额模块
    function getSum() {
        var count = 0; // 总件数      
        var money = 0; // 总价
        $.each($(".itxt"), function(i,ele) {
            if($(ele).parent().siblings(".goods-item").find("input").prop("checked")) {
                count += parseInt(ele.value);
            }
                   
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            if($(ele).siblings(".goods-item").find("input").prop("checked")) {
                money += parseFloat($(ele).children("strong").text().substr(1));
            }
            
        });
        $(".price-sum em").text('￥' + money.toFixed(2));
    };

    /* function itemBgc() {
        
        $(".j-checkbox:checked").parents(".item-full").addClass("item-current");
    }; */
})